/* eslint-disable no-unused-vars */
import React from 'react'
import { Grid, Box, TextField, Button, IconButton, FormControl, InputLabel, Select } from '@material-ui/core'
import { makeStyles, withStyles } from '@material-ui/core/styles'
import { Visibility, VisibilityOff } from '@material-ui/icons'
import SearchIcon from '@material-ui/icons/Search'
import DeleteIcon from '@material-ui/icons/Delete'
import AddIcon from '@material-ui/icons/Add'
import SyncRoundedIcon from '@material-ui/icons/SyncRounded'
import DateFnsUtils from '@date-io/date-fns'
import { MuiPickersUtilsProvider, KeyboardDatePicker } from '@material-ui/pickers'
import { TableItem } from '@/components'

const useStyles = makeStyles((theme) => ({
  select_table: {
    marginBottom: '15px',
    width: '100%',
    display: 'flex',
    flexFlow: 'wrap',
    alignItems: 'center',
    padding: '0 10px',
  },
  textField: {
    width: '200px',
  },
  select_table_btn: {
    whiteSpace: 'nowrap',
  },
  button_search: {
    color: '#fff',
    background: '#1890ff',
    borderColor: '#1890ff',
    padding: '7px 15px',
    fontSize: '12px',
    borderRadius: '3px',
    margin: '0 0 10px 10px',
    '&:hover': {
      background: '#46a6ff',
      borderColor: '#46a6ff',
      color: '#fff',
    },
  },
  button_reset: {
    borderColor: '#dcdfe6',
    color: '#606266',
    background: '#fff',
    padding: '7px 15px',
    fontSize: '12px',
    borderRadius: '3px',
    margin: '0 0 10px 10px',
    '&:hover': {
      color: '#1890ff',
      borderColor: '#badeff',
      background: '#e8f4ff',
    },
  },
}))

const HomeSelect = ({
  searchList,
  setSearchList,
  disable,
  selectedDate,
  handleDateChange,
  deptId,
  info,
  onList,
  setPageNum,
}) => {
  const classes = useStyles()

  return (
    <Box className={classes.select_table}>
      <TableItem title='登录名称：'>
        <TextField
          className={classes.textField}
          id='outlined-basic'
          label=''
          size='small'
          variant='outlined'
          value={searchList.userName}
          onChange={(event) => setSearchList({ ...searchList, userName: event.target.value })}
        />
      </TableItem>
      <TableItem title='手机号码：'>
        <TextField
          className={classes.textField}
          id='outlined-basic'
          label=''
          size='small'
          variant='outlined'
          value={searchList.phonenumber}
          onChange={(event) => setSearchList({ ...searchList, phonenumber: event.target.value })}
        />
      </TableItem>
      <TableItem title='用户状态：'>
        <FormControl variant='outlined' size='small' className={classes.textField}>
          <Select
            native
            value={searchList.status}
            onChange={(event) => setSearchList({ ...searchList, status: event.target.value })}
          >
            <option value={''}>{'请选择'}</option>
            {disable.map((v) => (
              <option value={v.dictValue} key={v.dictLabel}>
                {v.dictLabel}
              </option>
            ))}
          </Select>
        </FormControl>
      </TableItem>
      <TableItem title='创建时间：'>
        <>
          <MuiPickersUtilsProvider utils={DateFnsUtils}>
            <Grid container style={{ width: '250px' }} justifyContent='space-between' alignItems='center'>
              <KeyboardDatePicker
                margin='normal'
                style={{ width: '48%' }}
                id='date-picker-dialog'
                label='开始日期'
                format='MM/dd/yyyy'
                value={selectedDate}
                onChange={handleDateChange}
                KeyboardButtonProps={{
                  'aria-label': 'change date',
                }}
              />
              ~
              <KeyboardDatePicker
                margin='normal'
                style={{ width: '48%' }}
                id='date-picker-dialog'
                label='结束日期'
                format='MM/dd/yyyy'
                value={selectedDate}
                onChange={handleDateChange}
                KeyboardButtonProps={{
                  'aria-label': 'change date',
                }}
              />
            </Grid>
          </MuiPickersUtilsProvider>
        </>
      </TableItem>

      <Box component={'span'} className={classes.select_table_btn}>
        <Button variant='contained' onClick={info} className={classes.button_search} startIcon={<SearchIcon />}>
          搜索
        </Button>
        <Button
          variant='contained'
          onClick={() => {
            setSearchList({
              userName: '',
              phonenumber: '',
              status: '',
            })
            setTimeout(() => {
              setPageNum(1)
              onList({ userName: '', phonenumber: '', status: '', pageNum: 1, deptId: deptId })
            })
          }}
          className={classes.button_reset}
          startIcon={<SyncRoundedIcon />}
        >
          重置
        </Button>
      </Box>
    </Box>
  )
}

export default HomeSelect
